<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>展开评论框示例</title>
    <style>
        .comment-box {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            width: 300px;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
            max-height: 50px;
            /* 初始状态只显示一行 */
        }

        .comment-box.expanded {
            max-height: 1000px;
            /* 展开后显示更多内容 */
        }

        .comment-box.collapsed {
            /* 这个类现在用于明确指示评论框是收起的 */
        }
    </style>

    <style>
        /* Toast 容器的默认样式 */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            opacity: 0;
            /* 初始时不可见 */
            transition: opacity 0.3s ease-in-out;
            /* 添加过渡效果 */
        }

        /* Toast 容器显示时的样式 */
        .toast.show {
            opacity: 1;
            /* 完全可见 */
        }
    </style>
</head>

<body>
    <div class="comment-section">
        <div id="commentBox" class="comment-box collapsed">
            <p>这是一条评论的内容，点击这里可以展开或收起这个评论框。</p>
            <p>这里是评论的更多内容...</p>
        </div>
    </div>



    <script>
        var commentBox = document.getElementById('commentBox');
        var isExpanded = false; // 跟踪评论框的状态

        commentBox.addEventListener('click', function () {
            if (isExpanded) {
                // 如果评论框已经展开，则收起它
                this.classList.add('collapsed');
                this.classList.remove('expanded');
                isExpanded = false;
            } else {
                // 如果评论框是收起的，则展开它
                this.classList.add('expanded');
                this.classList.remove('collapsed');
                isExpanded = true;
            }
        });


        function showToast(message, duration = 3000) {
            // 创建一个新的div元素作为toast容器
            const toastContainer = document.createElement('div');
            toastContainer.classList.add('toast'); // 添加toast类

            // 设置toast的内容
            toastContainer.textContent = message;

            // 将toast容器添加到页面上
            document.body.appendChild(toastContainer);

            // 显示toast（通过添加show类来触发过渡效果）
            toastContainer.classList.add('show');

            // 在指定的持续时间后移除toast容器
            setTimeout(() => {
                // 先隐藏toast（通过移除show类来触发过渡效果），然后再从DOM中移除
                toastContainer.classList.remove('show');
                // 给过渡效果一些时间来完成（这里假设过渡时间是0.3秒）
                setTimeout(() => {
                    document.body.removeChild(toastContainer);
                }, 350); // 稍微多给一点时间确保过渡完成
            }, duration);
        }

        showToast('这是一个提示消息！');
    </script>
</body>

</html>